"use client";
import { GlobalNoticeRep } from "@/api/home";
import Box from "@/components/Box";
import Empty from "@/components/Empty";
import { timeFormat } from "@/utils/methods";
import { Badge, Collapse } from "antd-mobile";
import { useLocale } from "next-intl";
import style from "./style.module.scss";
interface Props {
    data: GlobalNoticeRep[];
    type: "system" | "user";
    handler: (active: string, key: Props["type"]) => void;
}
const SystemMessage = (props: Props) => {
    const { data, type, handler } = props;
    const locale = useLocale();

    const collapseChange = async (active: string | null) => {
        if (!active) return;
        handler && handler(active, type);
    };
    if (!data.length) return <Empty />;
    return (
        <div className={style.messageCollapse}>
            <Collapse accordion onChange={collapseChange}>
                {data.map((notice, index) => (
                    <Collapse.Panel
                        key={`${notice.id}`}
                        arrowIcon={
                            <div className={"flex items-center"}>
                                {/* <Badge
                                    className={`mr-[0.1rem] h-[0.06rem] w-[0.06rem]`}
                                    style={{ "--color": "#ff311b" }}
                                    content={!notice.is_read ? Badge.dot : ""}
                                ></Badge> */}
                                {
                                    !notice.is_read && <div className={`mr-[0.1rem] h-[0.08rem] w-[0.08rem]`} style={{borderRadius: "0.04rem", backgroundColor: "#ff311b"}}></div>
                                }
                                <span className={"iconfont icon-zhankai"} />
                            </div>
                        }
                        title={
                            <section>
                                <header className={"flex items-center"}>
                                    <h6 className={""}>{notice.content?.title}</h6>
                                </header>
                                <p className={"text-[12px] text-[#64676d]"}>
                                    {notice.send_time
                                        ? timeFormat(notice.send_time!, locale)
                                        : timeFormat(notice.send_user_time!, locale)}
                                </p>
                            </section>
                        }
                    >
                        <div>
                            <p className={"text-[16px] text-[#c1c6d2]"}>{notice.content?.text}</p>

                            <img src={notice.content?.image} alt="" />
                            <div
                                className={`-mb-[12px] mt-[0.0694rem] flex h-[0.2778rem] items-center justify-center border-t-[0.006rem] border-[#454545] text-[#64676d]`}
                            >
                                <Box
                                    action={notice.action_type}
                                    actionData={notice.action_params}
                                    className={"flex items-center"}
                                >
                                    <p className={"text-[0.1111rem]"}>{notice.content?.word} </p>
                                    <span
                                        className={
                                            "iconfont icon-xiangyou2 ml-[5px] text-[0.08rem]"
                                        }
                                    ></span>
                                </Box>
                            </div>
                        </div>
                    </Collapse.Panel>
                ))}
            </Collapse>
        </div>
    );
};

export default SystemMessage;